<template>
  <div>
    <Card>
      <tables ref="tables" editable searchable search-place="top" v-model="tableData" :columns="columns" @on-delete="handleDelete"/>
      <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为Csv文件</Button>
    </Card>
  </div>
</template>

<script>
import Tables from '_c/tables'
export default {
  name: 'tables_page',
  components: {
    Tables
  },
  data () {
    return {
      // ["08:30", "9:10", "14:00", "18:05", "18:30","20:30","21:30","22:30"]
      columns: [
        { title: '组名', key: 'name', sortable: true },
        { title: '日期', key: 'date', editable: true },
        { title: '08:30', key: '08:30', editable: true },
        { title: '9:10', key: '9:10', editable: true },
        { title: '14:00', key: '14:00', editable: true },
        { title: '18:05', key: '18:05', editable: true },
        { title: '18:30', key: '18:30', editable: true },
        { title: '20:30', key: '20:30', editable: true },
        { title: '21:30', key: '21:30', editable: true },
        { title: '22:30', key: '22:30', editable: true }
      ],
      tableData: []
    }
  },
  methods: {
    handleDelete (params) {
      console.log(params)
    },
    exportExcel () {
      this.$refs.tables.exportCsv({
        filename: `table-${(new Date()).valueOf()}.csv`
      })
    }
  },
  // mounted () {
  //   getTableData().then(res => {
  //     this.tableData = res.data
  //   })
  // },
  mounted () {
    this.$axios.get('/api/history/').then((response) => {
      if (response.data.success) {
        this.tableData = response.data.data
        console.log(this.tableData)
      }
    }).catch((response) => {
      console.log(response)
    })
  }
}
</script>

<style>

</style>
